<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>grid</title>
<style type="text/css">
body {

}

:focus {
	outline-style: none;
}

.grid {
	position: relative;
	border: 1px solid #A0A0A0;
	background-color: #F0F0F0;
	border-radius: 3px 3px 3px 3px;
	height: 300px;
}

.grid .gridcols {
	position: absolute;
	border: 1px solid #FF0000;
	height: 20px;
	text-align: center;
}

.grid .scrollplot {
	position: absolute;
	border: 1px solid #FF0000;
	height: 20px;
}

.grid .gridcols span {

}

.grid .gridcols input {

}

.grid .gridcols:hover {
	background-color: #E0E0E0;
}

.grid .griddata {
	border: 1px solid #0000FF;
	position: absolute;
	top: 20px;
	overflow: scroll;
	height: 280px;
}

.tc {
	text-align: center;
}

.tl {
	text-align: left;
}

.tr {
	text-align: right;
}
</style>
</head>
<body>
	<div class="grid">
		<div class="gridcols" style="width: 50px; left: 0px;">
			<span>序号</span>
		</div>
		<div class="gridcols" style="width: 20px; left: 50px;">
			<input type="checkbox">
		</div>
		<div class="gridcols" style="width: 100px; left: 70px;">
			<span>序号</span>
		</div>
		<div class="gridcols" style="width: 100px; left: 170px;">
			<span>序号</span>
		</div>
		<div class="gridcols" style="width: 120px; left: 270px;">
			<span>序号</span>
		</div>
		<div class="scrollplot" style="width: 17px; left: 390px;"></div>
		<div class="griddata">
			<table cellpadding="0" cellspacing="0">
				<thead>
					<tr style="height: 0px;">
						<th style="width: 50px; text-align: center;"></th>
						<th style="width: 20px;"></th>
						<th style="width: 100px;"></th>
						<th style="width: 100px;"></th>
						<th style="width: 120px;"></th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td class="tc">1</td>
						<td class="tc"><input type="checkbox"></td>
						<td class="tc">1</td>
						<td class="tc">1</td>
						<td class="tc">1</td>
					</tr>
					<tr>
						<td class="tc">1</td>
						<td class="tc"><input type="checkbox"></td>
						<td class="tc">1</td>
						<td class="tc">1</td>
						<td class="tc">1</td>
					</tr>
					<tr>
						<td class="tc">1</td>
						<td class="tc"><input type="checkbox"></td>
						<td class="tc">1</td>
						<td class="tc">1</td>
						<td class="tc">1</td>
					</tr>
					<tr>
						<td class="tc">1</td>
						<td class="tc"><input type="checkbox"></td>
						<td class="tc">1</td>
						<td class="tc">1</td>
						<td class="tc">1</td>
					</tr>
					<tr>
						<td class="tc">1</td>
						<td class="tc"><input type="checkbox"></td>
						<td class="tc">1</td>
						<td class="tc">1</td>
						<td class="tc">1</td>
					</tr>
					<tr>
						<td class="tc">1</td>
						<td class="tc"><input type="checkbox"></td>
						<td class="tc">1</td>
						<td class="tc">1</td>
						<td class="tc">1</td>
					</tr>
					<tr>
						<td class="tc">1</td>
						<td class="tc"><input type="checkbox"></td>
						<td class="tc">1</td>
						<td class="tc">1</td>
						<td class="tc">1</td>
					</tr>
					<tr>
						<td class="tc">1</td>
						<td class="tc"><input type="checkbox"></td>
						<td class="tc">1</td>
						<td class="tc">1</td>
						<td class="tc">1</td>
					</tr>
					<tr>
						<td class="tc">1</td>
						<td class="tc"><input type="checkbox"></td>
						<td class="tc">1</td>
						<td class="tc">1</td>
						<td class="tc">1</td>
					</tr>
					<tr>
						<td class="tc">1</td>
						<td class="tc"><input type="checkbox"></td>
						<td class="tc">1</td>
						<td class="tc">1</td>
						<td class="tc">1</td>
					</tr>
					<tr>
						<td class="tc">1</td>
						<td class="tc"><input type="checkbox"></td>
						<td class="tc">1</td>
						<td class="tc">1</td>
						<td class="tc">1</td>
					</tr>
					<tr>
						<td class="tc">1</td>
						<td class="tc"><input type="checkbox"></td>
						<td class="tc">1</td>
						<td class="tc">1</td>
						<td class="tc">1</td>
					</tr>
					<tr>
						<td class="tc">1</td>
						<td class="tc"><input type="checkbox"></td>
						<td class="tc">1</td>
						<td class="tc">1</td>
						<td class="tc">1</td>
					</tr>
					<tr>
						<td class="tc">1</td>
						<td class="tc"><input type="checkbox"></td>
						<td class="tc">1</td>
						<td class="tc">1</td>
						<td class="tc">1</td>
					</tr>
					<tr>
						<td class="tc">1</td>
						<td class="tc"><input type="checkbox"></td>
						<td class="tc">1</td>
						<td class="tc">1</td>
						<td class="tc">1</td>
					</tr>
					<tr>
						<td class="tc">1</td>
						<td class="tc"><input type="checkbox"></td>
						<td class="tc">1</td>
						<td class="tc">1</td>
						<td class="tc">1</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</body>
</html>